<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考借鉴
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
-->
<template>
	<view class="wanl-live-footer">
		<view class="wanl-live-footer-bottom_msg">
			<input
				type="text"
				v-if="true"
				class="wanl-live-footer-bottom_msg_input"
				confirm-type="send"
				v-model="message"
				@confirm="send('msg')"
				placeholder-style="rgba(255, 255, 255, .8)"
				placeholder-class="wanl-live-footer-bottom_msg_input-placeholder"
				placeholder="问什么都告诉你~"
			/>
		</view>
		<!-- H5 页面需要发送按钮 -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS -->
		<view class="wanl-live-footer-bottom_send" v-if="true">
			<view class="wanl-live-footer-bottom_send-btn" @tap="send('msg')">
				<text class="wanl-live-footer-bottom_send-btn-text">发送</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 购物袋 -->
		<!-- <view class="wanl-live-footer-bottom_controll"> </view> -->
		<view class="wanl-live-footer-bottom_goods">
			<view class="wanl-btn wanl-btn-transpare" @tap="popup('open', 0)">
				<!-- <text class="wanl-btn-text wanl-live-footer-bottom_goods-btn-text">&#xe87f;</text> -->
				<image class="wanl-btn-image" src="/static/images/live/shop1.png" />
				<view class="wanl-btn-tag" v-if="goods.length != 0">
					<text class="wanl-btn-tag-text">{{ numFormat(goods.length) }}</text>
				</view>
			</view>
			<view class="wanl-btn wanl-btn-transpare" @tap="popup('open', 1)">
				<!-- <text class="wanl-btn-text wanl-live-footer-bottom_goods-btn-text">&#xe87f;</text> -->
				<image class="wanl-btn-image" src="/static/images/live/lw1.png" />
				<view class="wanl-btn-tag" v-if="goods.length != 0">
					<text class="wanl-btn-tag-text">{{ numFormat(goods.length) }}</text>
				</view>
			</view>
		</view>

		<!-- 发送点赞 -->
		<view class="wanl-live-footer-bottom_praise" @tap="send('like')" v-if="state == 1">
			<view class="wanl-btn">
				<text class="wanl-btn-text wanl-live-footer-bottom_praise-btn-text">&#xe635;</text>
				<view class="wanl-btn-tag" v-if="like != 0">
					<text class="wanl-btn-tag-text">{{ numFormat(like) }}</text>
				</view>
			</view>
		</view>
		<!-- 弹出窗口 -->
		<uni-popup ref="goods" type="bottom">
			<view class="wanl-live-popup">
				<view class="wanl-live-popup-title">
					<text class="wanl-live-popup-title-text">{{ lwType == 0 ? '购物赠票' : '赠送礼物' }}</text>
					<text class="wanl-live-popup-title-close-text" @tap="popup('close')">&#xe66b;</text>
				</view>
				<view class="pay">
					<view class="l">
						<image class="doudou" src="../../static/images/live/doudou.png" mode=""></image>
						<view class="qian">xxx</view>
					</view>
					<view class="r">
						充值
						<text class="wlIcon-fanhui2"></text>
					</view>
				</view>
				<view class="sousuo">
					<text class="wlIcon-sousuo"></text>
					<input class="input" placeholder-class="input" placeholder="搜索商品" type="text" v-model="sousuo" />
				</view>
				<scroll-view scroll-y="true" class="wanl-live-popup-list">
					<view class="warrp">
						<view :class="['box', lwType == 0 ? 'sp' : 'lw', lwIndex == index ? 'index' : '']" v-for="(item, index) in 10" :key="item" @click="lwIndex = index">
							<view class="img-box">
								<image class="img" src="../../static/images/baoming/bg.png" mode=""></image>
							</view>
							<view class="name">
								<view class="">温和卸妆水</view>
								<view class="t" v-if="lwType == 0">99.00元</view>
							</view>
							<view class="p">赠送99票</view>
						</view>
					</view>
				</scroll-view>
				<view class="bott">
					<view class="l">
						数量
						<view class="jian">-</view>
						<view class="num">{{ lwNum }}</view>
						<view class="jia">+</view>
					</view>
					<view class="b">立即赠送</view>
				</view>
				<!-- 多终端兼容性 -->
				<view :style="{ height: statusFootHeight + 'px' }"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'wanlLiveFooter',
	props: {
		statusFootHeight: {
			default: 0
		},
		like: {
			type: Number,
			default: 0
		},
		state: {
			default: 0
		},
		goods: {
			type: Array,
			default: () => []
		}
	},
	beforeCreate() {
		// #ifdef APP-NVUE
		var domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: "url('/static/style/iconfont.ttf')"
		});
		// #endif
	},
	data() {
		return {
			lwType: 0,
			lwIndex: 0,
			sousuo: '',
			lwNum: 1,
			message: ''
		};
	},
	methods: {
		// 操作弹出框
		popup(method, type) {
			this.lwType = type;
			this.$refs.goods[method]();
		},
		// 传递给live 消息
		send(type, index) {
			switch (type) {
				// 发送消息
				case 'msg':
					if (this.message) {
						this.$emit('change', {
							type: 'msg',
							message: this.message
						});
						this.message = '';
					}
					// 收起键盘
					uni.hideKeyboard();
					break;
				// 点赞
				case 'like':
					this.$emit('change', { type: 'like' });
					break;
				// 求讲解
				case 'seek':
					this.$emit('change', {
						type: 'seek',
						key: index
					});
					this.popup('close');
					break;
			}
		},
		goods(id) {
			uni.navigateTo({
				url: `/pages/product/goods?id=${id}`
			});
			this.popup('close');
		},
		stcOss(url) {
			let oss = this.$store.state.common.appUrl.oss;
			let image = '';
			if (url) {
				if (/^(http|https):\/\/.+/.test(url)) {
					image = url;
				} else {
					image = oss + url;
				}
			} else {
				image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
			}
			return image;
		},
		numFormat(num) {
			return num > 9999 ? (num - (num % 1000)) / 10000 + 'w' : num;
		}
	}
};
</script>
<style scoped lang="scss">
@import '@/static/style/wanlnvue.css';

.wanl-live-footer {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	.pay {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		.l {
			display: flex;
			flex-direction: row;
			.doudou {
				width: 42rpx;
				height: 44rpx;
			}
			.qian {
				margin-left: 10rpx;
				font-family: Bahnschrift, Bahnschrift;
				font-weight: 400;
				font-size: 36rpx;
				color: #261332;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.r {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ec5bff;
			line-height: 40rpx;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			width: 146rpx;
			height: 60rpx;
			background: #fef6ff;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}
	}
	.sousuo {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 700rpx;
		padding: 20rpx 20rpx;
		background: #f3f3f3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		.wlIcon-sousuo {
			margin-right: 20rpx;
		}
		.input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #bebebe;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
	.warrp {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.box:nth-child(3n-1) {
		margin: 0 18rpx;
	}
	.box {
		width: 224rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e7dae9;
		margin-bottom: 18rpx;
		&.index {
			background: #fef4ff;
		}
		&.sp {
			height: 372rpx;
			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		&.lw {
			height: 262rpx;
			.img {
				width: 132rpx;
				height: 132rpx;
				border-radius: 10rpx;
			}
		}
		.img-box {
			padding: 12rpx;
			display: flex;
			align-items: center;
		}

		.name {
			display: flex;
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #3d3d3d;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.p {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 65rpx;
			background: #ec5bff;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
	.bott {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		padding: 0 30rpx;
		margin-left: -18rpx;
		width: 750rpx;
		height: 110rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(236, 145, 252, 0.38);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.l {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #2c2e3b;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			.jian,
			.jia {
				color: #b7a1ba;
				margin: 0 15rpx;
				width: 56rpx;
				height: 58rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff1fc;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.num {
				width: 50rpx;
				text-align: center;
			}
		}
		.b {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 252rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #ec5bff 0%, #fc79e6 100%);
			box-shadow: inset 0rpx 8rpx 10rpx 6rpx rgba(255, 252, 252, 0.3);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 42rpx;
			font-style: normal;
			text-transform: none;
		}
	}
}
/* 消息按钮 */
.wanl-live-footer-bottom_msg {
	/* #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
	flex: 3;
	/* #endif */
	/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
	flex: 4;
	/* #endif */
	margin-left: 25rpx;
	margin-right: 25rpx;
}
.wanl-live-footer-bottom_msg_input {
	height: 76rpx;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 100px;
	color: #fff;
	padding-left: 25rpx;
	padding-right: 25rpx;
	font-size: 28rpx;
}
.wanl-live-footer-bottom_msg_input-placeholder {
	color: #ffffff;
}
/* 发送按钮 */
.wanl-live-footer-bottom_send {
	flex: 1;
	align-items: flex-start;
}
.wanl-live-footer-bottom_send-btn {
	background-color: #f02b57;
	border-radius: 100px;
	height: 50rpx;
	width: 100rpx;
	justify-content: center;
	align-items: center;
}
.wanl-live-footer-bottom_send-btn-text {
	color: #ffffff;
	font-size: 28rpx;
}

/* 进度条 */
.wanl-live-footer-bottom_controll {
	justify-content: center;
	align-items: center;
	color: #fff;
	flex: 4;
	z-index: 100;
	position: relative;
	height: 76rpx;
	line-height: 76rpx;
}
.wanl-live-footer-bottom_controll-play {
	width: 76rpx;
	height: 76rpx;
	position: relative;
}
/* 商品 */
.wanl-live-footer-bottom_goods {
	justify-content: space-around;
	flex-direction: row;
	position: relative;
	flex: 1;
	align-items: center;
}

/* 购物袋颜色 */
.wanl-live-footer-bottom_goods-btn-text {
	color: #f40;
	font-size: 56rpx;
}

/* 点赞 */
.wanl-live-footer-bottom_praise {
	position: relative;
	justify-content: center;
	align-items: center;
	flex: 1;
}
.wanl-live-footer-bottom_praise-btn-text {
	color: #fff;
	font-size: 41rpx;
}
/* POPUP */
.wanl-live-popup {
	position: relative;
	background: rgba(255, 255, 255, 0.93);
	padding-left: 18rpx;
	padding-right: 18rpx;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
}
.wanl-live-popup-title {
	height: 100rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border: 2rpx solid #f3f3f3;
}
.wanl-live-popup-title-text {
	font-size: 32rpx;
}
.wanl-live-popup-title-close-text {
	font-size: 32rpx;
	/* #ifndef APP-PLUS */
	font-family: 'iconfont';
	/* #endif*/
	font-family: iconfont;
	width: 40rpx;
	height: 40rpx;
}

.wanl-live-popup-list {
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	/* #ifdef APP-PLUS */
	height: 690rpx;
	/* #endif */

	/* #ifdef H5 || MP */
	max-height: 1000rpx;
	min-height: 200rpx;
	/* #endif */
}
.wanl-live-popup-list-item {
	position: relative;
	flex-direction: row;
	background: #fff;
	padding-left: 18rpx;
	padding-right: 18rpx;
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	margin-bottom: 18rpx;
	border-radius: 18rpx;
}

.wanl-live-popup-list-item-img {
	width: 180rpx;
	height: 180rpx;
	border-top-left-radius: 12rpx;
	border-top-right-radius: 12rpx;
	border-bottom-right-radius: 12rpx;
	border-bottom-left-radius: 12rpx;
	overflow: hidden;
	background-color: #f7f7f7;
	margin-right: 20rpx;
}
.wanl-live-popup-list-item-image {
	width: 180rpx;
	height: 180rpx;
	border-radius: 18rpx;
}

.wanl-live-popup-list-item-subject {
	flex: 1;
	justify-content: space-between;
}

.wanl-live-popup-list-item-subject-title {
	/* #ifdef MP || H5 */
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* #endif */
}
.wanl-live-popup-list-item-subject-title-text {
	color: #222222;
	font-size: 28rpx;
	lines: 2;
	text-overflow: ellipsis;
	/* #ifdef APP-PLUS */
	line-height: 36rpx;
	/* #endif */
}

.wanl-live-popup-list-item-subject-operation {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}
.wanl-live-popup-list-item-subject-operation-price {
}
.wanl-live-popup-list-item-subject-operation-price-text {
	color: #f72b36;
	font-size: 32rpx;
	font-weight: 500;
}
.wanl-live-popup-list-item-subject-operation-button {
	flex-direction: row;
}
.wanl-live-popup-list-item-subject-operation-button-seek {
	margin-right: 18rpx;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	height: 54rpx;
	width: 130rpx;
	border-left: 2rpx solid #6200ff;
	border-right: 2rpx solid #6200ff;
	border-top: 2rpx solid #6200ff;
	border-bottom: 2rpx solid #6200ff;
}
.wanl-live-popup-list-item-subject-operation-button-seek-text {
	color: #6200ff;
	font-size: 27rpx;
}
.wanl-live-popup-list-item-subject-operation-button-shopping {
	background-color: #f72b36;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	width: 54rpx;
	height: 54rpx;
}
.wanl-live-popup-list-item-subject-operation-button-shopping-text {
	font-size: 30rpx;
	color: #fff;
	/* #ifndef APP-PLUS */
	font-family: 'iconfont';
	/* #endif*/
	font-family: iconfont;
}
</style>
